<template>
  <section class="youxue-table component">
    <!-- 表头 -->
    <ul class="th box box-center text-center">
      <li
        class="bold"
        :class="{'box-1': !head.width}"
        :style="{'width':head.width}"
        v-for="head in heads"
        :key="head.id"
      >
      {{head.label}}
      </li>
    </ul>

    <!-- 表行 -->
    <ul>
      <li class="tr box text-center" v-for="data in datas" :key="data.id">
        <div
          class="td box box-center"
          :class="{'box-1': !head.width}"
          :style="{'width':head.width}"
          v-for="head in heads"
          :key="head.id"
        >
        {{data[head.name]}}
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'youxueTable',

  props: {
    heads: {
      type: Array,
      default() {
        return [];
      }
    },

    datas: {
      type: Array,
      default() {
        return [];
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 表头
.th {
  padding: 10px 0;

  li {
    padding: 0 5px;
  }
}

// 表行
.tr {
  padding: 10px 0;
  margin-bottom: 5px;
  background-color: $color-active;
  .td {
    padding: 0 5px;
  }
}
.td_color {
  color: #7D6FD5!important;
}
.td_monry {
  color: #FFAA45!important;
}
.td_normal {
  color:#999999!important;
}
</style>